<template>
	<view class="uni-numbox">
		<view class="uni-numbox-minus" @click="_calcValue('reduce')">
			<text class="uni-numbox-minus-yticon" :class="{ 'uni-numbox-disabled-yticon': isMin}">-</text>
		</view>
		<input class="uni-numbox-value" type="number" :disabled="true" :value="inputValue">
		<!-- disabled用于控制是否允许输入 @blur="_onBlur"是输入框失焦事件，就是不选中-->
		<view class="uni-numbox-plus" @click="_calcValue('add')">
			<text class="uni-numbox-plus-yticon" :class="{ 'uni-numbox-disabled-yticon': isMax}">+</text>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			isMax: {
				type: Boolean,
				default: false
			},
			isMin: {
				type: Boolean,
				default: false
			},
			index: {
				type: Number,
				default: 0 //选中对象在列表中的下标
			},
			value: {
				type: Number,
				default: 1 //初始数量为1
			},
			min: {
				type: Number, //允许最商品数量是1
				default: 1
			},
			max: {
				type: Number,
				default: 999
			}
		},
		data() {
			return {
				inputValue: this.value,
			}
		},
		computed: {

		},
		watch: {
			inputValue(number) {
				const data = {
					number: number,
					index: this.index
				}
				this.$emit('eventChange', data); //回调
			}
		},
		methods: {
			_calcValue(type) {
				if (type === 'reduce'&&this.inputValue > this.min&&!this.isMin) {
					--this.inputValue;
				} else if (type === 'add'&&this.inputValue < this.max&&!this.isMax) {
					++this.inputValue;
				}
			}
			// _onBlur(event) {//失焦事件暂时不要了
			// 	console.log(event)
			// 	let value = event.detail.value;
			// 	if (!value) {
			// 		this.inputValue = 0;
			// 		return
			// 	}
			// 	value = +value;
			// 	if (value > this.max) {
			// 		value = this.max;
			// 	} else if (value < this.min) {
			// 		value = this.min
			// 	}

			// 	this.inputValue = value
			// }
		}
	}
</script>
<style>
	.uni-numbox {
		position: absolute;
		left: 30upx;
		bottom: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 230upx;
		height: 70upx;
		background: #f5f5f5;
	}

	.uni-numbox-minus,
	.uni-numbox-plus {
		margin: 0;
		background-color: #f5f5f5;
		width: 70upx;
		height: 100%;
		line-height: 70upx;
		text-align: center;
		position: relative;
	}

	.uni-numbox-minus-yticon,
	.uni-numbox-plus-yticon {
		font-size: 36upx;
		color: #555;
	}

	.uni-numbox-minus {
		border-right: none;
		border-top-left-radius: 6upx;
		border-bottom-left-radius: 6upx;
	}

	.uni-numbox-plus {
		border-left: none;
		border-top-right-radius: 6upx;
		border-bottom-right-radius: 6upx;
	}

	.uni-numbox-value {
		position: relative;
		background-color: #f5f5f5;
		width: 90upx;
		height: 50upx;
		text-align: center;
		padding: 0;
		font-size: 30upx;
	}

	.uni-numbox-disabled-yticon {
		color: #d6d6d6;
	}
</style>